<template>
	<el-dialog v-model="dialogVisible" title="添加优惠券" width="800" @close="handleClose">
		<el-form ref="ruleFormRef" :model="form" :rules="rules" label-width="140px">
			<el-form-item label="优惠券名称" prop="name">
				<el-input v-model="form.name" />
			</el-form-item>
			<el-form-item label="优惠券类型" prop="type">
				<el-select v-model="form.type" placeholder="请选择优惠券类型">
					<el-option label="满减券" value="1" />
					<el-option label="折扣券" value="2" />
				</el-select>
			</el-form-item>
			<el-form-item label="优惠券面值" prop="price">
				<el-input v-model="form.price" />
			</el-form-item>
			<el-form-item label="关联商品">
				<el-select v-model="form.goods" placeholder="请选择是否关联商品">
					<el-option label="商品1" value="1" />
					<el-option label="商品2" value="2" />
				</el-select>
			</el-form-item>
			<el-form-item label="优惠券使用条件" prop="condition">
				<el-select v-model="form.condition" placeholder="请选择优惠券使用条件">
					<el-option label="无门槛" value="1" />
					<el-option label="满金额可用" value="2" />
				</el-select>
			</el-form-item>
			<el-form-item label="最低消费金额">
				<el-input v-model="form.minAmount" />
			</el-form-item>
			<el-form-item label="最高优惠金额">
				<el-input v-model="form.maxAmount" />
			</el-form-item>
			<el-form-item label="开始时间" prop="startDate">
				<el-date-picker v-model="form.startDate" type="datetime" placeholder="选择日期时间" />
			</el-form-item>
			<el-form-item label="结束时间" prop="endDate">
				<el-date-picker v-model="form.endDate" type="datetime" placeholder="选择日期时间" />
			</el-form-item>
			<el-form-item label="描述说明">
				<el-input v-model="form.description" type="textarea" />
			</el-form-item>
		</el-form>
		<template #footer>
			<span class="dialog-footer">
				<el-button @click="dialogVisible = false">取消</el-button>
				<el-button type="primary" @click="submit">确定</el-button>
			</span>
		</template>
	</el-dialog>
</template>

<script setup lang="ts">
	import { ref , watch } from 'vue';
	import { ElMessage } from 'element-plus';
	import { addCouponApi } from '@/api/coupon';
	const props = defineProps({
		modelValue: {
			type: Boolean,
			default: false
		}
	})
	
	const ruleFormRef = ref()
	const dialogVisible = ref(false)
	const form = ref({
		name: '',
		type: '',
		price: '',
		goods: [],
		condition: '',
		minAmount: '',
		maxAmount: '',
		startDate: '',
		endDate: '',
		description: ''
	})
	const rules = ref({
		name: [
			{ required: true, message: '请输入优惠券名称', trigger: 'blur' }
		],
		type: [
			{ required: true, message: '请选择优惠券类型', trigger: 'change' }
		],
		price: [
			{ required: true, message: '请输入优惠券面值', trigger: 'blur' }
		],
		goods: [
			{ required: true, message: '请选择优惠券商品', trigger: 'change' }
		],
		condition: [
			{ required: true, message: '请选择优惠券使用条件', trigger: 'change' }
		],
		minAmount: [
			{ required: true, message: '请输入最低消费金额', trigger: 'blur' }
		],
		maxAmount: [
			{ required: true, message: '请输入最高优惠金额', trigger: 'blur' }
		],
		startDate: [
			{ required: true, message: '请选择优惠券开始时间', trigger: 'change' }
		],
		endDate: [
			{ required: true, message: '请选择优惠券结束时间', trigger: 'change' }
		],
		description: [
			{ required: true, message: '请输入描述说明', trigger: 'blur' }
		]
	})
	watch(() => props.modelValue, async (val:boolean) => {
		dialogVisible.value = val
	})
	const handleClose = () => {
		dialogVisible.value = false
		ruleFormRef.value.resetFields()
	}
	const submit = () => {
		ruleFormRef.value.validate(async (valid: any) => {
			if (valid) {
				const { message } = await addCouponApi(form.value)
				ElMessage.success(message)
				dialogVisible.value = false
			} else {
				console.log('error submit!');
				return false;
			}
		});
	}
</script>

<style>
</style>